import React, { FC, useEffect, useState } from 'react';
import { View, StyleSheet, StatusBar, Text } from 'react-native';
import { CommonStyle } from '../../common/commonStyle.ts';
import HomeScreen from './home/index.tsx';
import { NavigationProp, RouteProp } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import UserScreen from './user';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
import Octicons from 'react-native-vector-icons/Octicons';
import Feather from 'react-native-vector-icons/Feather';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import NewsScreen from './news';
import { Badge } from '@rneui/base';
import NewsRequest from '../../request/newsRequest.ts';
import EquipmentScreen from './equipment';
import OrderScreen from './order';

interface ITabScreenProps {
  navigation: NavigationProp<any, 'tab'>;
  route: RouteProp<{ tab: any }, 'tab'>;
}
const Tab = createBottomTabNavigator();
const TabScreen: React.FC<ITabScreenProps> = ({ navigation }) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    NewsRequest.CheckoutIsReadCount({}).then((res) => {
      setCount(res.data);
    });
  }, []);

  const screenOptions = ({ route }: any) => ({
    tabBarIcon: ({ focused, size }: any) => {
      let color: string = focused ? CommonStyle.mainColor : '#494848';
      switch (route.name) {
        case 'home':
          return <Octicons name="home" size={size} color={color} />;
        case 'equipment':
          return <Feather name="cpu" size={size} color={color} />;
        case 'order':
          return <FontAwesome name="reorder" size={size} color={color} />;
        case 'news':
          return (
            <View>
              <MaterialCommunityIcons name="message-processing-outline" size={size} color={color} />
              <Badge
                status="error"
                badgeStyle={{
                  transform: [{ scale: count ? 1.3 : 0 }],
                }}
                containerStyle={{ position: 'absolute', top: -2, left: 22 }}
              />
            </View>
          );
        case 'user':
          return <FontAwesome6 name="user-circle" size={size} color={color} />;
      }
    },
    tabBarLabelStyle: {
      marginBottom: 5,
    },
    tabBarStyle: {
      height: 60,
    },
    tabBarActiveTintColor: CommonStyle.mainColor,
    tabBarInactiveTintColor: '#494848',
  });

  const handleTabPress = () => {
    NewsRequest.CheckoutIsReadCount({}).then((res) => {
      setCount(res.data);
    });
  };

  return (
    <View style={styles.root}>
      <StatusBar translucent backgroundColor={'transparent'} barStyle="dark-content" />
      <Tab.Navigator screenOptions={screenOptions}>
        <Tab.Screen name="home" options={{ title: '首页', headerShown: false }} component={HomeScreen} listeners={{ tabPress: () => handleTabPress() }} />
        <Tab.Screen name="equipment" options={{ title: '设备', headerShown: true }} component={EquipmentScreen} listeners={{ tabPress: () => handleTabPress() }} />
        <Tab.Screen name="order" options={{ title: '订单', headerShown: true }} component={OrderScreen} listeners={{ tabPress: () => handleTabPress() }} />
        <Tab.Screen name="news" options={{ title: '消息', headerShown: true }} component={NewsScreen} listeners={{ tabPress: () => handleTabPress() }} />
        <Tab.Screen name="user" options={{ title: '我', headerShown: false }} component={UserScreen} listeners={{ tabPress: () => handleTabPress() }} />
      </Tab.Navigator>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
});

export default TabScreen;
